<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>设置</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
    #qiniu-sync-params {
        display: none;
    }
</style>

<body>
    <div class="container mt-4">
        <h5>设置</h5>
        <form id="settings-form">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-tab="#config-file-location" href="#">文件存储位置</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-tab="#qiniu-sync-params" href="#">七牛云同步</a>
                </li>
            </ul>
            <div class="config-area mt-4" id="config-file-location">
                <div class="form-group">
                    <label for="exampleInputPassword1">选择文件存储位置</label>
                    <div class="input-group mb-2">
                        <input class="form-control" id="savedFileLocation" placeholder="当前存储地址" readonly
                               type="text">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" id="select-new-location"
                                    type="button">选择新的位置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="config-area mt-4" id="qiniu-sync-params">
                <div class="form-group row">
                    <label class="col-3 col-form-label" for="accessKey">Access Key</label>
                    <div class="col-9">
                        <input class="form-control" id="accessKey" placeholder="Access Key" type="text">
                        <small class="form-text text-muted" id="acHelp">请在七牛云密钥管理下查看</small>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label" for="secretKey">Secret Key</label>
                    <div class="col-9">
                        <input class="form-control" id="secretKey" placeholder="Secret Key" type="password">
                        <small class="form-text text-muted" id="skHelp">请在七牛云密钥管理下查看</small>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label" for="bucketName">Bucket名称</label>
                    <div class="col-9">
                        <input class="form-control" id="bucketName" placeholder="请输入 Bucket 名称" type="text">
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">保存</button>
        </form>
    </div>
    <script>
        require("./settings.js");
    </script>
</body>

</html>
